@CHARSET "UTF-8";

html, body {
	position: relative;
	height: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

.article {
	
}

/**** header ****/
.article .article-header {
	border-bottom: 1px solid #ccc;
	padding: 5px 0;
	height: 60px;
/* 	width: 100%; */
}

.article .article-header .header-pic {
	float: left;
	width: 45px;
	height: 45px;
/* 	background-color: red; */
}

.article .article-header .header-pic img{
	width: 42px;
	height: 42px;
}

.article .article-header .header-info {
	margin-top: 10px;
	float: left;
}

.article .article-header .header-info span {
	display: block;
}

.article .article-header .header-time {
	float: right;
	margin-top: 30px;
	font-size: 12px;
}

/**** article title ****/
.article .article-title {
	padding: 5px 5px;
}

.article .article-title .title-label {
	font-size: 18px;
	font-weight: bold;
}

.article .article-title .title-count {
	height: 20px;
	font-size: 15px;
	margin-top: 10px;
}

.hitCount {
	margin-right: 25px;
}

/**** article content ****/
.article .article-content {
	margin-top: 20px;
}

/**** article photos ****/
.article .article-photos {
	border-bottom: 3px solid #ccc;
	padding: 5px 5px;
}

.article .article-photos .photos-body img {
	max-width:100%;
}
.article .article-photos .photos-body ul {
	/* 	list-style:none; */
	padding: 0;
	
}

.article .article-photos .photos-body ul li {
	/* 	margin-top: 20px; */
	
}

/**** comments ****/
.article .article-comments {
	border-bottom: 3px solid #ccc;
}

.article .article-comments ul {
	padding: 0;
}

.article .article-comments .comments-item  {
	/* 	height: 80px; */
	border-bottom: 1px solid #ccc;

}


.article .article-comments .comments-item .comment-header {
	height: 45px;
	line-height: 45px;
	margin-top: 5px;
/* 	background-color: red; */
}

.article .article-comments .comments-item .comment-header .commenter-info{
/* 	margin: 5px; */
/* 	background-color: yellow; */
/* 	height: 50px; */
	width: 70%;
	float: left;
}

.article .article-comments .comments-item .comment-header .commenter-info img{
	height: 45px;
	width: 45px;
}

.article .article-comments .comments-item .comment-header .commenter-info .commenter-icon{
/* 	background-color: blue; */
	height: 40px;
	width: 40px;
	float: left;
	border-radius:50%;
 	overflow:hidden;
}

.article .article-comments .comments-item .comment-header .commenter-info .commenter-name{
	font-size:15px;
	float: left;
}

.article .article-comments .comments-item .comment-header .comment-index{
/* 	background-color: yellow; */
/* 	height: 50px; */
/* 	width: 50px; */
	float: right;
	margin-right: 10px;
	font-size: 12px;
}

.article .article-comments .comments-item .comment-body {
	margin-top: 5px;
	margin-left: 40px;
	height: 100%;
/* 	background-color: yellow; */
}

.article .article-comments .comments-item .comment-footer {
	margin-top: 5px;
	margin-left: 40px;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
/* 	background-color: yellow; */
}


.course-list{
	margin:10px 0 0 -40px;
}